<template>
  <el-dialog top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }"
        class="container-main">
        <t-detail v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基础信息'"
          :is-card-border="true">
        </t-detail>
        <div style="margin-top:10px;">
          <el-tabs v-model="tabActiveName"
            @tab-click="tabClick">
            <el-tab-pane name="控制台"
              label="控制台">
              <div style="padding:10px;">
                <el-table :border="false"
                  size="medium"
                  :data="deviceDataList"
                  style="width: 100%">

                  <af-table-column label="设备名称"
                    prop="deviceName"
                    width="300px;" />

                  <af-table-column label="设备功能"
                    prop="identifierStr">
                    <template slot-scope="{ row }">
                      {{ row.identifierStr }}
                    </template>
                  </af-table-column>

                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="关联设备"
              label="关联设备">
              <div style="padding:10px;">
                <el-table :border="true"
                  size="medium"
                  :data="deviceDataList"
                  style="width: 100%">
                  <af-table-column align="center"
                    label="设备编码"
                    prop="deviceCode" />
                  <af-table-column align="center"
                    label="设备名称"
                    prop="deviceName" />
                  <af-table-column align="center"
                    label="设备型号"
                    prop="deviceModel" />
                  <af-table-column align="center"
                    label="设备功能"
                    prop="identifierStr" />
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="操作日志"
              label="操作日志">
              <div style="padding:10px;">
                <el-table border
                  size="medium "
                  :data="logDataList"
                  style="width: 100%">
                  <af-table-column align="center"
                    label="设备编码"
                    prop="equipmentCode" />
                  <af-table-column align="center"
                    label="设备名称"
                    prop="equipmentName" />
                  <af-table-column align="center"
                    label="操作人"
                    prop="createUser" />
                  <af-table-column align="center"
                    label="操作类型"
                    prop="handleType" />
                  <af-table-column align="center"
                    label="操作日期"
                    prop="createTime"
                    width="150px" />
                </el-table>
                <pagination v-show="total > 0"
                  :total="total"
                  :page.sync="pagination.pageNum"
                  :limit.sync="pagination.pageSize"
                  :page-sizes="pageSizeOptions"
                  @pagination="getControlDeviceLogList" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
      <el-footer>
        <el-button size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false">
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import TDetail from '@/components/TDetail'
import Pagination from "@/components/Pagination";
import dataDetailMixins from '@/mixins/data-detail-mixins'
import deviceManageApi from '@/api/device-manage'
import remoteControlApi from "@/api/remote-control";

export default {
  name: 'RemoteControlDetail',
  components: {
    TDetail,
    Pagination
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data () {
    return {
      detailList: this.getDetailList('start'),
      tabActiveName: '控制台',
      deviceDataList: [],
      logDataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      pageSizeOptions: [5, 10, 20, 30, 40, 50, 80, 100, 120, 150, 200],
      total: 0,
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.toClose()
      },
    },
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      const p1 = remoteControlApi.getControlDeviceInfo({
        id: this.params.item.id
      })
      const p2 = deviceManageApi.getDictValueAttr({
        fieldName: "control_model",
        tableName: "t_equipment_control"
      })

      Promise.all([p1, p2]).then((p) => {
        this.detailObj = p[0].data.data

        const controlModelTypeData = p[1].data.dictValue
        const controlModelTypeList = controlModelTypeData.filter(
          (e) => e.dictValue === this.detailObj.controlType
        )
        if (controlModelTypeList.length > 0) {
          this.detailObj['controlModelTypeStr'] = controlModelTypeList[0].dictText
        }

        this.detailList = this.getDetailList('')

        this.detailObj.itemList.forEach((ele) => {
          ele.tslOption = ele.tsl ? JSON.parse(ele.tsl) : []
          const item = ele.tslOption.filter((e) => {
            return ele.identifier == e.identifier
          })
          if (item.length > 0) {
            ele.identifierStr = item[0].name
          }
        })
        this.deviceDataList = this.detailObj.itemList
        console.log('detailObj=', this.deviceDataList)
      })
    },
    getDetailList (type) {
      const list = [
        [
          {
            text: '控制设备',
            value: type === 'start' ? '' : this.detailObj.deviceName,
          },
          {
            text: '编号',
            value: type === 'start' ? '' : this.detailObj.deviceCode,
          },
        ],
        [
          {
            text: '控制类型',
            value: type === 'start' ? '' : this.detailObj.controlModelTypeStr,
          },
          {
            text: '厂家',
            value: type === 'start' ? '' : this.detailObj.factory,
          },
        ],
        [
          {
            text: '安装时间',
            value: type === 'start' ? '' : this.detailObj.installTime,
          },
          {
            text: '安装位置',
            value: type === 'start' ? '' : this.detailObj.installSite,
          },
        ],
      ]
      return list
    },

    tabClick () {
      if (this.tabActiveName == '操作日志') {
        this.pagination.pageNum = 1
        this.getControlDeviceLogList()
      }
    },
    getControlDeviceLogList () {
      remoteControlApi.getControlDeviceLogList({
        ...this.pagination,
        ...{
          controlDeviceId: this.params.item.id
        }
      }).then((ret) => {
        this.logDataList = ret.data.data.rows;
        this.total = ret.data.data.total;
      }).catch(() => {
        this.logDataList = [];
        this.total = 0;
      });
    },

    toClose () {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped >
@import '../../../../../styles/part-custom';
</style>
